<template>
    <input type="text" v-model="todoValue" @keyup="setTodoValue">
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useTodo, IUseTodo } from '../../hooks/TodoInput/index';

export default defineComponent({
    name: 'TODOINPUT',
    setup () {
        // 需要类型注解
        const todoValue = ref<string>('')
        const { setTodo } : IUseTodo = useTodo()

        const setTodoValue = (e : KeyboardEvent) : void => {
            // keyCode 弃用  使用  code 代替 
            if ( e.code === 'Enter' && todoValue.value.trim().length ) {
                // 设置数据
                setTodo(todoValue.value)
                todoValue.value = ''
                
            }
        }

        return {
            todoValue,
            setTodoValue
        }
    }
});
</script>

<style  scoped>

</style>